<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>


    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md7">
                &nbsp;
            </div>
            <div class="layui-col-md5">
                债券信息
            </div>
        </div>
        <div class="layui-col-xs7" >
            <form class="layui-form layui-row" action="/bond/submit" method="post" enctype="application/x-www-form-urlencoded">
                <div class="layui-form-item">
                    <label class="layui-form-label">债券</label>
                    <div class="layui-input-inline">
                        <select name="iCode" id="tradeInstrument" lay-filter="bond" lay-verify="selectvalue">
                            <option value="-1" selected="selected" >请选择债券</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">交易对手</label>
                    <div class="layui-input-inline" >
                        <select name="partyID" id="tradeParty" lay-verify="selectvalue">
                            <option value="-1" selected="selected" >请选择交易对手</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">外证账户</label>
                    <div class="layui-input-inline" >
                        <select name="secuCode" id="secuAccount" lay-filter="secu" lay-verify="selectvalue">
                            <option  value="-1" selected="selected" >请选择账户</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">外资账户</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input" maxlength="50" readonly="readonly" name="cashCode"  id="cashCode">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">交易方向</label>
                    <div class="layui-input-inline">
                        <select name="tDirection">
                            <option value="1" selected="selected">买入</option>
                            <option value="2">卖出</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">交易日期</label>
                        <div class="layui-input-inline">
                            <input type="text" name="dealDate" id="dealDate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">交易市场</label>
                        <div class="layui-input-inline">
                            <input type="text" id="mtype"  value="深交所" readonly="readonly" autocomplete="off" class="layui-input" style="background-color: #ffcdc4">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">券面金额（万）</label>
                    <div class="layui-input-inline">
                        <input type="text" name="couponAmount" id="couponAmount" autocomplete="off" class="layui-input"  maxlength="8" lay-verify="required|couponAmount">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">成交均价</label>
                    <div class="layui-input-inline">
                        <input type="text" name="dealAvgPrice" id="price" autocomplete="off" class="layui-input" maxlength="8" lay-verify="required|dealPrice">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">成交金额</label>
                    <div class="layui-input-inline">
                        <input type="text" name="dealPaySum" id="dealPaySum" autocomplete="off" readonly="readonly" class="layui-input" maxlength="20" style="background-color: #ffcdc4">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">交易费用</label>
                    <div class="layui-input-inline">
                        <input type="text" name="charge" id="charge" autocomplete="off" class="layui-input" maxlength="8" lay-verify="charge">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="hidden" name="iName" id="iName" autocomplete="off" class="layui-input" value="" maxlength="20">
                        <input type="hidden" name="mType" autocomplete="off" class="layui-input" value="XSHE" maxlength="20">
                        <input type="hidden" name="trader" autocomplete="off" class="layui-input" value="sysTrader" maxlength="20">
                        <button class="layui-btn" lay-submit lay-filter="sub">立即提交</button>
                    </div>
                </div>

            </form>
        </div>
        <div class="layui-col-xs5" style="border:1px solid #000" >
            <form class="layui-form layui-row" action="/bond/submit" method="post" enctype="application/x-www-form-urlencoded">
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 90px">金融工具类型</label>
                    <div class="layui-input-inline">
                        <input type="text" value="" id="t-aType" class="layui-input" style="background-color: transparent;border: none">
                    </div>
                    <label class="layui-form-label" style="width: 90px">金融工具代码</label>
                    <div class="layui-input-inline">
                        <input type="text" value="" id="t-iCode" class="layui-input" style="background-color: transparent;border: none">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 90px">金融工具名称</label>
                    <div class="layui-input-inline">
                        <input type="text" value="" id="t-iName" class="layui-input" style="background-color: transparent;border: none">
                    </div>
                    <label class="layui-form-label" style="width: 90px">交易市场</label>
                    <div class="layui-input-inline">
                        <input type="text" value="" id="t-mType" class="layui-input" style="background-color: transparent;border: none">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 90px">发行方式</label>
                    <div class="layui-input-inline">
                        <input type="text" value="" id="t-issueMode" class="layui-input" style="background-color: transparent;border: none">
                    </div>
                    <label class="layui-form-label" style="width: 90px">发行人</label>
                    <div class="layui-input-inline">
                        <input type="text" value="" id="t-issuer" class="layui-input" style="background-color: transparent;border: none">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 90px">上市日期</label>
                    <div class="layui-input-inline">
                        <input type="text" value="" id="t-startDate" class="layui-input" style="background-color: transparent;border: none">
                    </div>
                    <label class="layui-form-label" style="width: 90px">到期日期</label>
                    <div class="layui-input-inline">
                        <input type="text" value="" id="t-endDate" class="layui-input" style="background-color: transparent;border: none">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 90px">面值</label>
                    <div class="layui-input-inline">
                        <input type="text" value="" id="t-parValue" class="layui-input" style="background-color: transparent;border: none">
                    </div>
                    <label class="layui-form-label" style="width: 90px">发行规模</label>
                    <div class="layui-input-inline">
                        <input type="text" value="" id="t-issueAmount" class="layui-input" style="background-color: transparent;border: none">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 90px">息票类型</label>
                    <div class="layui-input-inline">
                        <input type="text" value="" id="t-couponType" class="layui-input" style="background-color: transparent;border: none">
                    </div>
                    <label class="layui-form-label" style="width: 90px">票面利率</label>
                    <div class="layui-input-inline">
                        <input type="text" value="" id="t-price" class="layui-input" style="background-color: transparent;border: none">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 90px">计息方式</label>
                    <div class="layui-input-inline">
                        <input type="text" value="" id="t-interestType" class="layui-input" style="background-color: transparent;border: none">
                    </div>
                    <label class="layui-form-label" style="width: 90px">信用评级</label>
                    <div class="layui-input-inline">
                        <input type="text" value="" id="t-extPrting" class="layui-input" style="background-color: transparent;border: none">
                    </div>
                </div>

            </form>
        </div>
    </div>
    </div>


</div>

<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../js/jquery-3.4.1.min.js" charset="UTF-8"></script>
<script src="../js/form.js" charset="UTF-8"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#dealDate'
        });
        laydate.render({
            elem: '#endDate'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            selectvalue:function(value , item){
                if (value == "-1"){
                    var info;
                    if ($(item).attr("name") == "iCode") {
                        info = "债券"
                    }else if ($(item).attr("name") == "partyID") {
                        info = "交易对手"
                    }else if ($(item).attr("name") == "secuCode") {
                        info = "外证账户"
                    }
                    return "请选择"+info
                }
            },
            dealPrice:function(value , item){
                var reg = new RegExp("(^[1-9](\\d+)?(\\.\\d{1,4})?$)|(^0$)|(^\\d\\.\\d{1,4}$)")
                if(!reg.test(value)){
                    return "非法的成交均价输入"
                }
            },
            couponAmount:function(value, item){
                var reg = new RegExp("(^[1-9](\\d+)?(\\.\\d{1,2})?$)|(^0$)|(^\\d\\.\\d{1,2}$)")
                if (!reg.test(value)){
                    return "非法的券面金额"
                }
            },
            charge:function(value , item){
                var reg = new RegExp("(^[1-9](\\d+)?(\\.\\d{1,2})?$)|(^0$)|(^\\d\\.\\d{1,2}$)")
                if (value != ""){
                    if (!reg.test(value)) {
                        return "非法的手续费输入"
                    }
                }
            },


            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            }
            , pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });

        //监听提交
        form.on('submit(sub)', function (data) {
            layer.confirm('确认录入交易？?', {title:'交易录入'}, function(index){
                $.ajax({
                    url:"/bond/submit",
                    data:JSON.stringify( data.field),
                    dataType:'JSON',
                    contentType : "application/json",
                    type:'POST',
                    success :function (result) {
                        if (result.msg == "交易日期必须在上市日和到期日之间") {
                            $("#dealDate").val("")
                        }
                        layer.msg(result.msg)
                    }
                })
            });
            return false;

        });
        //选择外证账户时 自动填写其对应的外资账户
        form.on('select(secu)', function(data){
            $.ajax({
                type:"GET",
                url:"/bond/getCashMapping",
                data:{secuCode:data.value},
                dataType:"json",
                success:function (result) {
                    $("#cashCode").val(result.cashCode+"   "+result.cashName)
                }
            })
        });
        //下拉框选择债券时，获取债券的所有信息
        form.on('select(bond)', function(data){
            //alert(data.value)
            $.ajax({
                type:"GET",
                url:"/bond/getBondInfo",
                data:{iCode:data.value},
                dataType:"json",
                success:function (result) {
                    $("#iName").val(result.iCode+"   "+result.iName)
                    console.log(result)
                    if (result.aType == undefined){
                        $("#t-aType").val(result.aType)
                        $("#t-couponType").val(result.couponType)
                        $("#t-endDate").val(result.endDate)
                        $("#t-iCode").val(result.iCode)
                        $("#t-iName").val(result.iName)
                        $("#t-interestType").val(result.interestType)
                        $("#t-issueAmount").val("")
                        $("#t-issueMode").val(result.issueMode)
                        $("#t-issuer").val(result.issuer)
                        $("#t-mType").val(result.mType)
                        $("#t-price").val("")
                        $("#t-parValue").val(result.parValue)
                        $("#t-startDate").val(result.startDate)
                        $("#t-extPrting").val(result.extPrting)
                    } else {
                        var issueAmount = parseFloat(result.issueAmount)/10000
                        //填充债券信息
                        $("#t-aType").val(result.aType)
                        $("#t-couponType").val(result.couponType)
                        $("#t-endDate").val(result.endDate)
                        $("#t-iCode").val(result.iCode)
                        $("#t-iName").val(result.iName)
                        $("#t-interestType").val(result.interestType)
                        $("#t-issueAmount").val(issueAmount.toString()+"万")
                        $("#t-issueMode").val(result.issueMode)
                        $("#t-issuer").val(result.issuer)
                        $("#t-mType").val(result.mType)
                        $("#t-price").val(result.price)
                        $("#t-parValue").val(result.parValue)
                        $("#t-startDate").val(result.startDate)
                        $("#t-extPrting").val(result.extPrting)
                    }
                }
            })
        });
        //表单初始赋值
        form.val('example', {
            "username": "贤心" // "name": "value"
            , "password": "123456"
            , "interest": 1
            , "like[write]": true //复选框选中状态
            , "close": true //开关状态
            , "sex": "女"
            , "desc": "我爱 layui"
        })


    });
</script>

</body>
</html>